import React, { Component } from 'react';
import nav from './assets/images/nav.png'
import axios from 'axios'
// 1、认认真真排版
// 2、90%还原页面
import './App.scss'
// 10、正确封装列表组件
import List from './components/List'
// 16、正确封装tab组件
import Tab from './components/Tab'
class App extends Component {
  state = {
    list: [],
    tabs: []
  }
  render() {
    const { list, tabs } = this.state
    // 9、合理使用组件生命周期
    return (
      <div>
        {/* // 7、正确使用雪碧图 */}
        <img src={ nav } alt="" width="100%"/>
        <Tab tabs={ tabs }></Tab>
        {
          list.length > 0 && list.map((v, i) => {
            // 12、根据列表组件props 的type属性，实现无图形式列表
            // 13、根据列表组件props 的type属性，实现三图一标题形式列表
            // 14、根据列表组件props 的type属性，实现图左字右形式列表
            if(v.url) {
              // 8、正确实现父子组件通信
              // 11、正确模拟列表数据，渲染列表
              return <List { ...v } key={i} type="单图"></List>
            } else if (v.urls) {
              return <List { ...v } key={i} type="三图"></List>
            } else {
              return <List { ...v } key={i} type="无图"></List>
            }
          })
        }
      
      </div>
    );
  }
  componentDidMount() {
    axios.get('/api/list').then(resp => {
      this.setState({
        list: resp.data.data
      })
    })


    axios.get('/api/tabs').then(resp => {
      this.setState({
        tabs: resp.data.data
      })
    })
  }
}

export default App;

// 3、规范定义目录结构
// 4、规范定义语义话组件名、文件名、变量名
// 5、正确使用create-react-app创建项目脚手架







// 15、正确模拟 咨询 休闲 生活 查询数据
// 17、实现咨询 休闲 生活 查询的tab切换
// 18、点击咨询下方列表箭头实现列表展开
// 19、点击咨询下方列表箭头实现箭头翻转
// 20、再次点击咨询下方列表箭头实现列表收起
